<div class="wrapper flex justify-between items-center">
  <div class="actions flex gap-1">
    <div
      class="item hidden"
      [class.!block]="index() > 0"
      (click)="onUpdown('up', $event)"
      [matTooltip]="'上移'"
      matTooltipPosition="above"
    >
      <app-btn
        [content]="{
          label: '',
          color: 'primary',
          mode: 'icon',
          icon: { svg: 'arrow-collapse-up', inline: true },
        }"
      />
    </div>
    <div
      class="item hidden"
      [class.!block]="index() < length() && index() !== length() - 1"
      (click)="onUpdown('down', $event)"
      [matTooltip]="'下移'"
      matTooltipPosition="above"
    >
      <app-btn
        [content]="{
          label: '',
          color: 'primary',
          mode: 'icon',
          icon: { svg: 'arrow-collapse-down', inline: true },
        }"
      />
    </div>
    <div class="item" matTooltip="复制JSON" matTooltipPosition="above" (click)="onCopy()">
      <app-btn
        [content]="{
          label: '',
          color: 'primary',
          mode: 'icon',
          icon: { svg: 'content-copy', inline: true },
        }"
      />
    </div>
    @if (bcData()) {
      <div
        class="item"
        matTooltip="粘贴复制的组件到下面"
        matTooltipPosition="above"
        (click)="onPaste($event, bcData())"
      >
        <app-btn
          [content]="{
            label: '',
            color: 'primary',
            mode: 'icon',
            icon: { svg: 'content-paste', inline: true },
          }"
        />
      </div>
    }
    <div
      class="item"
      (click)="onSetting(content, $event)"
      [matTooltip]="'编辑组件通用配置'"
      matTooltipPosition="above"
    >
      <app-btn
        [content]="{
          label: '',
          color: 'primary',
          mode: 'icon',
          icon: { svg: 'tune-vertical', inline: true },
        }"
      />
    </div>
    <app-divider [content]="{ vertical: true }" />
    <div class="item" (click)="onDelete($event)" [matTooltip]="'移除'" matTooltipPosition="above">
      <app-btn
        [content]="{
          label: '',
          color: 'primary',
          mode: 'icon',
          icon: { svg: 'delete', inline: true },
        }"
      />
    </div>
  </div>
</div>
